<!-- @format -->
<script setup>
import { getArticleListApi, deleteArticleApi } from '@/api/article';
import { ref,computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ArticleOps from './components/ArticleOps.vue';
import {ARTICLE_OPS_TYPE} from '@/constant/article'

const query = ref({
    current: 2,
    pageSize: 10,
});
// 保存文章列表
const articleList = ref([
    { id: '520000200508013557', stem: '称提飞者选同叫主条派总万备数', creator: '连城诀', category: '运维', createdAt: '2041-03-14 01:27' },
    { id: '61000020230423835X', stem: '变为何己织如他易山气群达使', creator: '柳生雪姬', category: '人工智能', createdAt: '2031-02-07 12:40' }
]);

// 文章总数
const total = ref(100);

// 获取文章列表
const getArticleList = async () => {
    const data= await getArticleListApi(query.value);
    articleList.value = data.rows;
    total.value = data.total;
};

getArticleList();

// 分页展示功能
const handleSizeChange = (val) => {
    query.value.pageSize = val;
    getArticleList();
};

const handleCurrentChange = (val) => {
    query.value.current = val;
    getArticleList();
};

// 删除文章
const onDelete = async (id) => {
    // console.log(`删除文章id: `, id);

    try {

        /*
            这里的 await 有两个作用:
                1. 同步代码执行顺序, 先判断是否确认删除, 才执行删除操作
                2. 得到 Promise 的结果, 用于判断是否删除成功, 失败的话会跑到 catch 里面 
        */
        // 询问是否删除
        await ElMessageBox.confirm(
            '该删除操作不可逆，是否删除？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )

        // 调用删除文章接口
        await deleteArticleApi(id);
        getArticleList();
        ElMessage.success('删除成功');
    } catch (error) {
        ElMessage.error('删除失败');
    }
};

// 抽屉组件, 用来进行增改查操作
const visible = ref(false);

const opsType = ref(ARTICLE_OPS_TYPE.ADD);
const articleId = ref(0);

// 打开抽屉方式的中英文映射
const opsTypeMap = {
    [ARTICLE_OPS_TYPE.ADD]: '新增',
    [ARTICLE_OPS_TYPE.SHOW]: '查看',
    [ARTICLE_OPS_TYPE.UPDATE]: '编辑',
};

// 定义打开抽屉的标题
const title = computed(() => {
    return opsTypeMap[opsType.value] + '文章';
});


const open = () => {
    visible.value = true;
};

const onShow = (id) => {
    opsType.value = ARTICLE_OPS_TYPE.SHOW;
    articleId.value = id;
    open();
};

const onUpdated = (id) => {
    console.log(`编辑文章id: `, id);
    opsType.value = ARTICLE_OPS_TYPE.UPDATE;
    articleId.value = id;
    open();
};

const onAdd = () => {
    opsType.value = ARTICLE_OPS_TYPE.ADD;
    open();
};

// 抽屉组件关闭时的回调
const onFinish = () => {
    visible.value = false;
    getArticleList();
};




</script>

<template>
    <div class="article-box">
        <!-- 面包屑导航组件 -->
        <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片组件 -->
        <el-card>
            <!-- 头部 -->
            <template #header>
                <div class="card-header">
                    <span>共 {{ total }} 条记录</span>
                    <el-button type="primary" round @click="onAdd">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增文章</span>
                    </el-button>
                </div>
            </template>
            <!-- 主体：表格区域 -->
            <el-table border striped :data="articleList">
                <el-table-column prop="stem" label="标题" width="300" />
                <el-table-column prop="creator" label="作者" width="180" />
                <el-table-column prop="category" label="类别" width="140" />
                <el-table-column prop="likeCount" sortable label="点赞" width="140" />
                <el-table-column prop="views" sortable label="浏览数" width="140" />
                <el-table-column prop="createdAt" label="创建时间" width="240" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-tooltip content="查看" placement="bottom" effect="light" >
                            <el-icon size="16">
                                <View @click="onShow(row.id)"/>
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip content="编辑" placement="bottom" effect="light" >
                            <el-icon size="16">
                                <Edit @click="onUpdated(row.id)" />
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="bottom" effect="light" >
                            <el-icon size="16">
                                <Delete @click="onDelete(row.id)" />
                            </el-icon>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 底部：分页组件 -->
            <template #footer>
                <el-pagination background layout="sizes,prev, pager, next,jumper,total" :total="total"
                    :page-sizes="[5, 10, 20, 30]"
                    v-model:current-page="query.current" :page-size="query.pageSize" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </template>

            <!-- 抽屉组件 -->
            <!-- 
            抽屉组件
                v-model="布尔值"： 控制抽屉组件的打开或关闭
                title: 抽屉组件的标题
                direction: 抽屉组件的弹出方向
                size: 控制窗体的大小，百分数是相对于可视区的宽度
            -->
            <el-drawer v-model="visible" :title="title" direction="rtl" size="45%">
                <!-- 文章操作组件 -->
                 <!-- 这里绑定key是为了让 vue3 不复用该组件, 每次都创建新的组件, 从而每次都要执行向后端发送请求 -->
                <ArticleOps 
                    :key="articleId"
                    :opsType="opsType" 
                    :articleId="articleId" 
                    @finish="onFinish"
                    @close="visible = false"
                />
            </el-drawer>
        </el-card>

    </div>
</template>

<style scoped lang="scss">
.article-box {
    .el-card {
        margin-top: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
        }

        :deep(.el-card__footer) {
            margin-top: -15px;
            border-top: none;
        }

        .el-table {
            .el-icon:nth-child(2) {
                margin: 0 10px;
            }
        }

        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }
}
</style>
